<template>
  <div>
    <div class="select-config">
      <span>选择配置：</span>
      <el-select v-model="configId" placeholder="请选择配置" @change="getPublicNumber">
        <el-option
          v-for="ele in configList"
          :key="ele.id"
          :label="ele.name"
          :value="ele.id"
        />
      </el-select>
    </div>
    <div class="list-box">
      <el-card
        v-for="(item, idx) in templateList"
        :key="idx"
        class="box-card"
        shadow="hover"
        @click="clickCard(item)"
      >
        <template #header>
          <div class="card-header">
            <span class="header-icon"></span>
            <span class="flex-1 header-title">{{ item.title }}</span>
            <!-- <span class="header-time">2021-01-02</span> -->
          </div>
        </template>
        <div class="card-content">
          <!-- <div class="content-header">感谢您购买了某某产品，小三再次恭喜您成为某某的会员！您的会员信息如下：</div> -->

          <div class="content-center">
            <!-- <span class="_title">姓名</span>
          <span class="_value">法外狂徒-张三</span> -->
            <div v-html="item.example" style="white-space: pre-wrap"></div>
          </div>
          <!-- <div class="content-footer">
          更多会员尊享礼遇尽在“会员专区”，如上述信息有任何疑惑，请随时拨打欧家客服热线090090999
        </div> -->
        </div>
      </el-card>
    </div>
  </div>
</template>
<script lang="ts" setup>
import CanvasApi from "@/api/canvasApi.js";
import sysConfigApi from "@/api/sysConfigApi";
const emit = defineEmits(["clickCard"]);

const templateList = ref([] as any);
const configId = ref("");
const configList = ref([] as any);
// const templateList = ref([] as any)

const getPublicNumber = async (id: any) => {
  let rs = await CanvasApi.getPublicNumber({ configId: id });
  if (rs.code == 200) {
    
    templateList.value = rs.payload.template_list;
  }
};

const getConfigList = async () => {
  if (configList.value.length) {
    return;
  }
  let rs: any = await sysConfigApi.getConfigList({ externalType: "weChat" });
  if (rs.code == 200) {
    configList.value = rs.payload;
  }
};

const clickCard = (item: any) => {
  emit("clickCard", item);
};

onMounted(() => {
  getConfigList();
  // getPublicNumber()
});
</script>
<style lang="scss" scoped>
.list-box {
  display: flex;
  flex-flow: wrap;
}
.box-card {
  width: 438px;
  margin: 0 20px 20px 0;
  cursor: pointer;
}
:deep(.el-card__header) {
  line-height: 44px;
  padding: 0 16px;
  background: #e8f2ff;
}
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  .header-icon {
    display: inline-block;
    width: 4px;
    height: 16px;
    margin-right: 8px;
    background: var(--el-color-primary);
    border-radius: 1px;
  }
  .header-title {
    font-size: 14px;
    font-weight: 500;
    color: #333333;
  }
  .header-time {
    font-size: 14px;
    font-weight: 400;
    color: #909399;
  }
}
:deep(.el-card__body) {
  padding: 0;
}
.card-content {
  padding: 20px 16px;
  .content-header {
    font-size: 14px;
    font-weight: 400;
    color: #606266;
    line-height: 22px;
  }

  .content-center {
    margin: 8px 0;
    ._title {
      display: inline-block;
      width: 80px;
      text-align: left;
      font-size: 14px;
      font-weight: 400;
      color: #909399;
      line-height: 22px;
    }
    ._value {
      height: 22px;
      font-size: 14px;
      font-family: HelveticaNeue;
      color: #606266;
      line-height: 22px;
    }
  }

  .content-footer {
    font-size: 14px;
    font-weight: 400;
    color: #606266;
    line-height: 22px;
  }
}

.select-config{
  margin-bottom: 20px;
}
</style>
